<template>
  <div class="center">
    <el-row :gutter="26" style="height:100%">
      <el-col :span="8" class="content_left">
        <div class="grid-content bg-purple log-picture">
          <h2>桌面图标定制</h2>
          <el-form :model="addForm" ref="ruleForm" >
            <el-form-item label="选择桌面" label-width="100px" prop="batch">
              <el-select v-model="addForm.table" placeholder="请选择桌面" multiple style="width:75%">
                <el-option v-for="item in lotoptions" :key="item.name" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="控件A图片" label-width="100px" prop="package">
              <div class="flex felx_align upLogo">
                <div class="flex logo_upload">
                  <el-input autocomplete="off" placeholder="图片分辨率为1920*1200"></el-input>
                  <el-upload class="upload-demo" action :auto-upload="false" :show-file-list="false">
                    <el-button size="mini ">覆盖</el-button>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="控件B图片" label-width="100px" prop="package">
              <div class="flex felx_align upLogo">
                <div class="flex logo_upload">
                  <el-input autocomplete="off" placeholder="图片分辨率为1920*1200"></el-input>
                  <el-upload class="upload-demo" action :auto-upload="false" :show-file-list="false">
                    <el-button size="mini ">覆盖</el-button>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="控件C图片" label-width="100px" prop="package">
              <div class="flex felx_align upLogo">
                <div class="flex logo_upload">
                  <el-input autocomplete="off" placeholder="图片分辨率为1920*1200"></el-input>
                  <el-upload class="upload-demo" action :auto-upload="false" :show-file-list="false">
                    <el-button size="mini ">覆盖</el-button>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="控件D图片" label-width="100px" prop="package">
              <div class="flex felx_align upLogo">
                <div class="flex logo_upload">
                  <el-input autocomplete="off" placeholder="图片分辨率为1920*1200"></el-input>
                  <el-upload class="upload-demo" action :auto-upload="false" :show-file-list="false">
                    <el-button size="mini ">覆盖</el-button>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="控件E图片" label-width="100px" prop="package">
              <div class="flex felx_align upLogo">
                <div class="flex logo_upload">
                  <el-input autocomplete="off" placeholder="图片分辨率为1920*1200"></el-input>
                  <el-upload class="upload-demo" action :auto-upload="false" :show-file-list="false">
                    <el-button size="mini ">覆盖</el-button>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="控件F图片" label-width="100px" prop="package">
              <div class="flex felx_align upLogo">
                <div class="flex logo_upload">
                  <el-input autocomplete="off" placeholder="图片分辨率为1920*1200"></el-input>
                  <el-upload class="upload-demo" action :auto-upload="false" :show-file-list="false">
                    <el-button size="mini ">覆盖</el-button>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="16">2</el-col>
    </el-row>
  </div>
</template>

<script>
import { queryDesktopName } from "@/api/customMade.js";
export default {
  data() {
    return {
      //桌面下拉选择
      lotoptions: [],
      addForm: {
          table: ''
      }
    }
  },
  created() {
      this.getqueryDesktopName()
  },
  methods: {
      getqueryDesktopName() {
          queryDesktopName({userId: localStorage.getItem("ID")}).then(res => {
              this.lotoptions = res.data
          })
      }
  }
}
</script>

<style lang="scss" scoped>
.content_left {
  height: 100%;
  .log-picture {
    padding: 20px;
    h2 {
      font-weight: 500;
    }
  }
  .upLogo {
    .logo_Title {
      margin-right: 5px;
    }
    .upload-demo {
      position: absolute;
      right: 10px;
    }
    .logo_upload {
      width: 75%;
      position: relative;
    }
  }
  .facility {
    text-align: center;
  }
  .picture {
    text-align: center;
    margin-top: 40px;
  }
  .logo_text {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      width: 250px;
      font-size: 14px;
      line-height: 25px;
      p {
        margin: 0;
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
  }
  .download-log {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    .download-template {
      width: 250px;
      a {
        background-color: #252e3c;
        height: 40px;
        display: block;
        line-height: 40px;
        width: 110px;
        text-align: center;
        color: #70a1e2;
      }
    }
  }
}
</style>